<template>
<div class="department-list">
    <!-- 批量操作 -->
    <div class="action-btn">
		<Button size="small" @click="showModal(0)" type="success">添加部门</Button>
    </div>
	<Table border height="650" ref="menuTree" row-key="id" :columns="tableColumn" :data="dataList" :loading="dataLoading">
		<template #status="{ row }">
			<i-switch :true-value="1" :false-value="0" v-model="row.status" size="large" @on-change="changeStatus(row.id,$event)"></i-switch>
		</template>
		<template #action="{ row }">
			<Button type="info" size="small" style="margin-right: 5px;float:left" @click="showAdmin(row.id)">用户</Button>
			<Button type="success" size="small" style="margin-right: 5px;float:left" @click="showModal(row.id)">子部门</Button>
			<Button type="warning" size="small" style="margin-right: 5px;float:left" @click="showEdit(row.id)">修改</Button>
			<Button type="error" size="small" @click="removeDetail(row.id)">删除</Button>
		</template>
    </Table>
    <!-- 需要全屏时添加这句 :mask="false" class-name="idw100" -->
    <Drawer :closable="false" :mask-closable="false" :scrollable="true" title="添加部门" width="640" v-model="showModalStatus">
		<Spin size="large" fix v-if="loading"></Spin>
		<Form :label-width="80" :model="detailInfo" ref="departmentValidate" :rules="departmentValidate" action="javascript:void(0)">
			<FormItem label="上级部门" prop="parentId">
				<TreeSelect clearable v-model="detailInfo.parentId" :data="departmentSelect" v-width="200"></TreeSelect>
			</FormItem>
			<FormItem label="部门名称" prop="name">
				<Input v-model="detailInfo.name" placeholder="输入部门名称"></Input>
			</FormItem>
			<FormItem label="部门状态">
				<Switch :true-value="1" :false-value="0" v-model="detailInfo.status">
					<template #open>正常</template>
					<template #close>禁用</template>
				</Switch>
			</FormItem>
			<FormItem>
				<Button style="margin-right: 8px" @click="showModalStatus = false">取消</Button>
				<Button type="primary" @click="handleSubmit('departmentValidate')">提交</Button>
			</FormItem>
		</Form>
    </Drawer>
    <!-- 用户弹出 -->
    <Drawer :closable="false" :scrollable="true" title="用户列表" width="640" v-model="showAdminStatus">
		<Spin size="large" fix v-if="loading"></Spin>
		<Table border :columns="adminTableColumn" ref="adminList" :data="adminList" :loading="dataLoading">
			<template #action="{ row }">
				<Button type="warning" size="small" style="margin-right: 5px;float:left" @click="removeAdmin(row.id)">移出</Button>
			</template>
		</Table>
		<div class="drawer-footer">
			<Button style="margin-right: 8px" @click="showAdminStatus = false">关闭</Button>
		</div>
    </Drawer>
</div>
</template>

<script>
export default {
	name: 'DepartmentList',
	data() {
		return {
			loading: true,
			dataLoading: true,
			tableColumn: [
				{
					title: 'Id',
					key: 'id',
					width: 60,
				},
				{
					title: '名称',
					minWidth: 300,
					key: 'name',
					tree: true,
				},
				{
					title: '状态',
					width: 100,
					slot: 'status',
				},
				{
					title: '操作',
					key: 'action',
					width: 260,
					align: 'left',
					slot:"action",
				}
			],
			dataList: [],
			detailInfo: {
				parentId:0,
				name: '',
				status: 1
			},
			showModalStatus: false,
			showAdminStatus: false,
			departmentValidate: {
				name: [
					{ required: true, message: '部门名称必须填写', trigger: 'blur' }
				]
			},
			detailId:0,
			departmentSelect:[],
			adminList:[],
			adminTableColumn:[
				{
					title: '用户名',
					key: 'name'
				},
				{
				title: '手机号',
					key: 'phone'
				},
				{
					title: '操作',
					slot: 'action',
					width: 80,
					align: 'left',
				}
			],
		}
	},
	created: function() {
		// 取数据
		this.getTableList();
	},
	methods: {
		getTableList() {
			this.$api.department.tree().then(res => {
                this.dataList = res.result
			}).finally(e=>{
				this.dataLoading = false;
            });
		},
		// 展开添加
		showModal(parentId) {
			this.showModalStatus = !this.showModalStatus;
			this.detailInfo = {
				parentId:parentId,
				name: '',
				status: 1
			};
			this.detailId = 0;
			this.$api.department.select().then(res => {
                this.departmentSelect = res.result;
			}).finally(e=>{
				this.loading = false;
            });
		},
		// 添加
		handleSubmit(name) {
			this.$refs[name].validate((valid) => {
				if (valid) {
					this.loading = true;
					if (this.detailId == 0) {
						this.$api.department.create(this.detailInfo).then(res => {
                            this.getTableList();
						}).finally(res => {
                            this.showModalStatus = !this.showModalStatus;
							this.loading = false;
						});
					}else{
						this.detailInfo.detail_id = this.detailId;
						this.$api.department.update(this.detailInfo).then(res => {
                            this.getTableList();
						}).finally(res => {
                            this.showModalStatus = !this.showModalStatus;
							this.loading = false;
						});
					}
				} else {
					this.$Message.error('请检查输入的信息是否正确！');
					this.loading = false;
				}
			})
		},
		showEdit(id) {
			this.detailId = id;
			this.showModalStatus = !this.showModalStatus;
			// 取树形菜单
			this.$api.department.select().then(res => {
                this.departmentSelect = res.result;
				this.$api.department.detail({ detailId: id }).then(res => {
                    this.detailInfo = res.result;
				});
			}).finally(e=>{
				this.loading = false;
            });
		},
		// 删除
		removeDetail(id) {
			// 弹出确认框
			this.$Modal.confirm({
				title: '警告',
				content: '<p>此操作不可恢复，三思而后行</p>',
				onOk: () => {
					this.$api.department.remove({ detailId: id }).then(res => {
                        this.getTableList();
					});
				}
			});
		},
		// 修改状态
		changeStatus(id, value) {
			this.$api.department.status({ id: id, status: value }).then(res => {});
		},
		showAdmin(id){
			this.showAdminStatus = !this.showAdminStatus;
			this.detailId = id;
			this.$api.department.admins({detailId:id}).then(res => {
                this.adminList = res.result;
			}).finally(e=>{});
		},
		// 删除
		removeAdmin(admin_id) {
			// 弹出确认框
			this.$Modal.confirm({
				title: '警告',
				content: '<p>此操作不可恢复，三思而后行</p>',
				onOk: () => {
					this.$api.department.removeadmin({ adminId: admin_id,id: this.detailId }).then(res => {
                        this.adminList.splice(index, 1);
					});
				}
			});
		},
	}
}
</script>
